<template>
  <headPage :tabsIndex="1"></headPage>
  <div class="main_box content">
    <div class="navigate_view">
      <span class="navigate_text" @click="goBack">{{
        freecoursezone_zhuanqumingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="goBack">{{
        freeprofessionalmanagement_zhuanyemingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="goBack">详情</span>
      <span class="navigate_line">/</span>
      <span class="navigate_last_text">职业素养</span>
    </div>
    <div class="subject" v-loading="loading">
      <!-- <el-scrollbar>
              <div class="subject_item"></div>
            </el-scrollbar> -->
      <div class="subject_title">{{ title }}</div>
      <div class="subject_type">选择题</div>
      <div
        class="subject_item"
        v-for="(item, index) in displayList"
        :key="index">
        <div class="item_title">
          <span>{{ index + 1 }}、</span>
          <span>{{ item.timubiaoti }}</span>
        </div>
        <div class="item_other padding_left">
          <div class="item_img" v-if="item.timutupian">
            <el-image fit="cover" :src="item.timutupian" :lazy="true" />
          </div>
          <div class="item_video" v-if="item.timushipin">
            <el-image fit="cover" :src="item.timushipin.thumb" :lazy="true" />
            <img
              @click="seeVideo(item.timushipin.path)"
              class="play_img"
              src="../../assets/home/13.png"
              alt=""
            />
          </div>
        </div>

        <div
          @click="selectOption(index, option_index)"
          class="options_item"
          v-for="(option_name, option_index) in item.timuxuanxiang"
          :key="option_index"
        >
          <img
            v-if="option_name.isChange == 1"
            class="options_choice"
            src="../../assets/course/22.png"
            alt=""
          />
          <img
            v-if="option_name.isChange == 2"
            class="options_choice"
            src="../../assets/course/20.png"
            alt=""
          />
          <div class="item_text">
            <div class="letter">
              <span>{{ letter[option_index] }}.</span>
              <span>{{ option_name.xuanxiangbiaoti }}</span>
            </div>
            <div class="item_other">
              <div class="item_img" v-if="option_name.xuanxiangtupian">
                <el-image
                  fit="cover"
                  :src="option_name.xuanxiangtupian"
                  :lazy="true"
                />
              </div>
              <div class="item_video" v-if="option_name.xuanxiangshipin">
                <el-image
                  fit="cover"
                  :src="option_name.xuanxiangshipin.thumb"
                  :lazy="true"
                />
                <img
                  @click="seeVideo(option_name.xuanxiangshipin.path)"
                  class="play_img"
                  src="../../assets/home/13.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="submit_btn" @click="submit">提交</div>
  </div>

  <modalText
    ref="modalPopup"
    tip="提示"
    :text="modalContent"
    @confirm="confirm"
  ></modalText>
  <!-- 答题卡 -->
  <maskLayer v-model="visible" center append-to-body>
    <div class="answer_sheet">
      <div class="sheet_title">
        <div class="sheet_title_le">
          <!-- <div class="le_item">
            <div class="le_icon_1"></div>
            <span>正确</span>
          </div>
          <div class="le_item">
            <div class="le_icon_2"></div>
            <span>错误</span>
          </div> -->
          <div class="le_item">
            <div class="le_icon_3"></div>
            <span>未答</span>
          </div>
          <div class="le_item">
            <div class="le_icon_4"></div>
            <span>已答</span>
          </div>
        </div>
        <img
          @click="closePopup"
          class="sheet_title_ri"
          src="../../assets/course/18.png"
          alt=""
        />
      </div>

      <div class="sheet_list">
        <template v-for="(item, index) in topic_type_one" :key="index">
          <div class="index_item" v-if="item.is_Submit == 0">
            <span>{{ item.index }}</span>
          </div>
          <div class="index_item_4" v-if="item.is_Submit == 1">
            <span>{{ item.index }}</span>
          </div>
        </template>

        <!-- <div class="index_item_2">
          <span>2</span>
        </div>
        <div class="index_item_3">
          <span>3</span>
        </div> -->
      </div>
    </div>
  </maskLayer>

  <viewVideo :url="videoUrl" ref="videoText"></viewVideo>

  <div class="operation_view" @click="showTopic">
    <img src="../../assets//course/24.png" alt="" />
    <div>答题卡</div>
  </div>
</template>
    
<script name="courseMaterial" setup>
import { post6629b24f0bb22, post6629bc9182ee0 } from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import maskLayer from "@/components/maskLayer.vue";
import modalText from "@/components/modalText.vue";
import viewVideo from "@/components/viewVideo.vue";
import { ref, onMounted, reactive, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const injectMessage = inject("$message");

let course_id = ref(route.query.course_id); // 课程id
let freecoursezone_zhuanqumingcheng = ref(
  route.query.freecoursezone_zhuanqumingcheng
);
let freeprofessionalmanagement_zhuanyemingcheng = ref(
  route.query.freeprofessionalmanagement_zhuanyemingcheng
);
onMounted(() => {
  getList();
});
// 获取题目列表
let title = ref("");
let displayList = reactive([]);
let letter = ref(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]);
let topic_type_one = ref([]); // 题目选项卡
let answerInfo = ref([]); // 答案信息
let freeprofessionalcompetence_id = ref(""); // 素养id
let loading = ref(true);
function getList() {
  post6629b24f0bb22({
    freexiaokeliebiao_id: course_id.value,
  })
    .then((res) => {
    //   console.log(res);
      if (res.code == 1) {
        freeprofessionalcompetence_id.value =
          res.data.freeprofessionalcompetence_id;
        title.value = res.data.ceshibiaoti;
        displayList = Object.assign(displayList, res.data.topic_list);
        if (displayList.length > 0) {
          displayList.forEach((v, k) => {
            topic_type_one.value.push({
              freequestionmanagement_id: v.aid,
              index: k + 1,
              isChange: 1,
              is_Submit: 0,
            });
            answerInfo.value.push({
              freequestionmanagement_id: v.aid,
              yonghudaan: "",
              is_correct: 1,
            });

            if (v.timuxuanxiang.length > 0) {
              v.timuxuanxiang.forEach((v1, k1) => {
                v1.isChange = 1;
              });
            }
          });
        }
        loading.value = false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
function selectOption(index, option_index) {
  displayList[index].timuxuanxiang.forEach((v, k) => {
    v.isChange = 1;
  });
  displayList[index].timuxuanxiang[option_index].isChange = 2;
  topic_type_one.value[index].isChange = 2;
  topic_type_one.value[index].is_Submit = 1;
  answerInfo.value[index].yonghudaan =
    displayList[index].timuxuanxiang[option_index].xuanxiangbiaoti;
}

let modalPopup = ref(null);
function confirm() {
  post6629bc9182ee0({
    freeprofessionalcompetence_id: freeprofessionalcompetence_id.value,
    zuoti_data: JSON.stringify(answerInfo.value),
  })
    .then((res) => {
      console.log(res);
      if (res.code == 1) {
        injectMessage.success(res.msg);
        router.replace({
          path: "/examResults",
          query: {
            mistake_num: res.data.mistake_num,
            topic_total_num: res.data.topic_total_num,
            zhengquelv: res.data.zhengquelv,
            shifouhege: res.data.shifouhege,
            course_id: course_id.value,
            freeprofessionalcompetence_id: freeprofessionalcompetence_id.value,
            freecoursezone_zhuanqumingcheng: freecoursezone_zhuanqumingcheng.value,
            freeprofessionalmanagement_zhuanyemingcheng: freeprofessionalmanagement_zhuanyemingcheng.value,
          }
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
let modalContent = ref("");
function submit() {
  let num = topic_type_one.value.filter((u) => u.is_Submit == 1).length;
  if (num == displayList.length) {
    modalContent.value = "确认交卷吗？";
  } else {
    modalContent.value =
      "您当前做题" +
      num +
      "道，" +
      "还有" +
      (displayList.length - num) +
      "道题未做，确认交卷吗？";
  }
  modalPopup.value.openModal();
}

// 打开选项卡
let visible = ref(false);
function showTopic() {
  visible.value = true;
}
function closePopup() {
  visible.value = false;
}

function goBack() {
  router.go(-1);
}

// 查看视频
let videoUrl = ref("");
let videoText = ref(null);
function seeVideo(url) {
  if (!url) {
    injectMessage.error("视频出错了，稍后再试");
    return;
  }
  videoUrl.value = url;
  videoText.value.openVideo();
}
</script>
    
    <style lang="scss" scoped>
.content {
  margin-top: 97px;
}
.navigate_view {
  display: flex;
  align-items: center;
  padding: 13.5px 0 12px 0;
  .navigate_text {
    font-size: 9px;
    color: #666;
    cursor: pointer;
  }
  .navigate_line {
    font-size: 9px;
    color: #bfbfbf;
    margin: 0 5px;
  }
  .navigate_last_text {
    font-size: 9px;
    color: #1f52ae;
    cursor: pointer;
  }
}
.subject {
  background: #fff;
  padding: 25px 16px 20px 16px;
  .subject_title {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }
  .subject_type {
    display: inline-block;
    font-size: 7px;
    color: #1f52ae;
    margin-top: 20px;
    padding: 4.5px;
    background: #f2f6fd;
    border-radius: 2px;
  }
  .subject_item {
    padding: 10px 0;
    .item_title {
      font-size: 8px;
    }
    .options_item {
      display: flex;
      //   align-items: center;
      margin-top: 12px;
      .options_choice {
        cursor: pointer;
        width: 8px;
        height: 8px;
        margin-right: 5px;
        transform: translateY(2.5px);
      }
      .item_text {
        font-size: 8px;
        color: #666;
      }
      .letter {
        font-size: 8px;
        color: #666;
        margin-right: 1.5px;
      }
    }
    .padding_left {
      padding-left: 13px;
    }
    .item_other {
      display: flex;
      margin-top: 5px;
      .item_img {
        width: 118px;
        height: 63px;
        margin-right: 8px;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 2px;
        }
      }
      .item_video {
        width: 118px;
        height: 63px;
        position: relative;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 2px;
        }
        .play_img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 18px !important;
          height: 18px !important;
          cursor: pointer;
        }
      }
    }
  }
}
.answer_sheet {
  width: 400px;
  background: #fff;
  .sheet_title {
    padding: 8.5px 12px 8.5px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    .sheet_title_le {
      display: flex;
      align-items: center;
      .le_item {
        display: flex;
        align-items: center;
        margin-right: 18px;
        .le_icon_1 {
          width: 3px;
          height: 3px;
          border-radius: 50%;
          margin-right: 4px;
          background: #00cc7e;
        }
        .le_icon_2 {
          width: 3px;
          height: 3px;
          border-radius: 50%;
          margin-right: 4px;
          background: #fd5336;
        }
        .le_icon_3 {
          width: 3px;
          height: 3px;
          border-radius: 50%;
          margin-right: 4px;
          background: #e3e3e3;
        }
        .le_icon_4 {
          width: 3px;
          height: 3px;
          border-radius: 50%;
          margin-right: 4px;
          background: #bfbfbf;
        }
        span {
          font-size: 9px;
          font-weight: 500;
        }
      }
    }
    .sheet_title_ri {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }
  .sheet_list {
    overflow: hidden;
    padding: 20px 18px 20px 18px;
    .index_item {
      float: left;
      width: 23px;
      height: 23px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e3e3e3;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      margin: 0 8px 8px 0;
      span {
        font-size: 8px;
        font-weight: 500;
      }
    }
    .index_item:nth-child(12n + 12) {
      margin-right: 0;
    }
    .index_item_2 {
      float: left;
      width: 23px;
      height: 23px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #58bf71;
      border-radius: 50%;
      background: #58bf71;
      cursor: pointer;
      margin: 0 8px 8px 0;
      span {
        font-size: 8px;
        font-weight: 500;
        color: #fff;
      }
    }
    .index_item_2:nth-child(12n + 12) {
      margin-right: 0;
    }
    .index_item_3 {
      float: left;
      width: 23px;
      height: 23px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #ec695a;
      border-radius: 50%;
      background: #ec695a;
      cursor: pointer;
      margin: 0 8px 8px 0;
      span {
        font-size: 8px;
        font-weight: 500;
        color: #fff;
      }
    }
    .index_item_3:nth-child(12n + 12) {
      margin-right: 0;
    }
    .index_item_4 {
      float: left;
      width: 23px;
      height: 23px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #bfbfbf;
      border-radius: 50%;
      background: #bfbfbf;
      cursor: pointer;
      margin: 0 8px 8px 0;
      span {
        font-size: 8px;
        font-weight: 500;
        color: #333;
      }
    }
    .index_item_4:nth-child(12n + 12) {
      margin-right: 0;
    }
  }
}
.submit_btn {
  width: 120px;
  height: 24px;
  border-radius: 3px;
  background: #1f52ae;
  border: 1px solid #1f52ae;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #fff;
  margin: 23px auto 20px;
  cursor: pointer;
}

.operation_view {
  width: 56px;
  height: 56px;
  position: fixed;
  right: 48px;
  bottom: 120px;
  z-index: 99;
  cursor: pointer;
  div {
    text-align: center;
    font-size: 7px;
    transform: translateY(-18px);
  }
}
</style>
    